import React, { useState, useEffect } from 'react';
import { Card, Form, Button, Input, Modal, Typography, message } from 'antd';
import { ExportOutlined, SaveOutlined } from '@ant-design/icons';

const { Title } = Typography;

export interface IssueParams {
  bid?: string;
  bname?: string;
  opinion?: string;
}

interface CreateIssueProps {
  initData: {
    bhid: string;
    opinion?: string;
  };
  drawingMarks: any[];
  onSaveIssue?: (payload: { bhid?: string, opinion?: string, marks?: any }, callback: (success: boolean) => void) => void;
  onPropsChange?: (val: any) => void;
}

const CreateIssue: React.FC<CreateIssueProps> = (props) => {
  const [status, setStatus] = useState(1);
  const [form] = Form.useForm();
  const { initData, drawingMarks, onPropsChange, onSaveIssue } = props;

  useEffect(() => {
    form.setFields([
      {
        name: 'bhid',
        value: initData.bhid,
      },
    ]);
  }, [initData.bhid]);

  useEffect(() => {
    form.setFields([
      {
        name: 'opinion',
        value: initData.opinion,
      },
    ]);
  }, [initData.opinion]);

  const saveButtonClick = (e: any) => {
    if (e) {
      e.preventDefault();
    }
    form.submit();
  }

  const cancelButtonClick = (e: any) => {
    if (e) {
      e.preventDefault();
    }
    setStatus(1);
    if (onPropsChange) {
      onPropsChange({
        drawingMarks: [],
        pdfMarkable: true,
        collapsed: true,
      });
    };
    form.setFieldsValue({ opinion: null });
  }

  const handleIssueSave = (e: any) => {
    if (onSaveIssue) {
      onSaveIssue({
        bhid: e.bhid,
        opinion: e.opinion,
        marks: drawingMarks,
      }, (success: boolean) => {
        if (success) {
          message.success('操作成功！')
          setStatus(1);
          form.setFieldsValue({ opinion: null });
        }
      });
    }
  }

  return (
    <Card
      actions={[
        <Button type="link" icon={<SaveOutlined />} onClick={(e) => { saveButtonClick(e) }}>保存</Button>,
        <Button type="link" icon={<ExportOutlined />} onClick={(e) => { cancelButtonClick(e) }}>取消</Button>
      ]}
    >
      <Title level={3}>新增意见</Title>
      <Form
        form={form}
        layout="vertical"
        onFinish={(e: any) => {
          if (drawingMarks && drawingMarks.length > 0) {
            handleIssueSave(e);
          } else {
            Modal.confirm({
              title: '提示',
              content: '没有添加标注，是否保存？',
              onOk: () => {
                handleIssueSave(e);
              },
              onCancel: () => { }
            });
          }
        }}
      >
        <Form.Item name="bhid" noStyle>
          <Input hidden />
        </Form.Item>

        <Form.Item
          name="opinion"
          label="审查意见"
          rules={[
            { required: true, message: '必填' },
            { max: 200, message: '最长不超过200个字符！' },
          ]}
        >
          <Input.TextArea disabled={status === 0} maxLength={200} rows={3} />
        </Form.Item>

      </Form>
    </Card>
  );
};

export default CreateIssue;
